<template>
	<flexbox>
		<el-select
			style="flex: 1"
			v-model="dataValue.type"
			@change="valueChange"
			:disabled="disabled"
		>
			<el-option
				v-for="set in item.setting"
				:value="set.value"
				:label="set.name"
				:key="set.value"
			></el-option>
		</el-select>
		<!-- <el-input
			style="flex: 0 1 70px; margin-left: 10px"
			v-model="dataValue.text"
			:type="inputConfig.type"
			:disabled="disabled"
			:placeholder="placeholder"
			@input="valueChange"
		></el-input> -->
		<xh-element
			style="flex: 0 1 140px; margin-left: 10px"
			v-if="inputConfig"
			:value="dataValue.text"
			:placeholder="inputConfig.placeholder"
			:item="inputConfig"
			:type="inputConfig.data.formType"
			:disabled="inputConfig.disabled"
			@value-change="inputValueChange"
		/>
	</flexbox>
</template>
<script type="text/javascript">
import objMixin from './objMixin'

export default {
	name: 'xh-input-unit', // 新建 input
	components: {
		XhElement: () => import('./XhElement.vue')
	},
	mixins: [objMixin],
	computed: {
		type() {
			if (this.item && this.item.form_type == 'password') {
				return this.item.form_type
			} else {
				return 'text'
			}
		}
	},
	data() {
		return {
			inputConfig: null
		}
	},
	watch: {
		'item.value': {
			handler(data) {
				this.addInput(data.type)
			},
			immediate: true
		}
	},
	props: {},
	mounted() {
		// debugger
		// this.addInput(this.item.value)
	},
	methods: {
		valueChange(type) {
			const input = this.addInput(type)
			if (input) {
				this.dataValue.text = input.value
			}
			this.$emit('value-change', {
				item: this.item,
				index: this.index,
				value: this.dataValue
			})
		},
		inputValueChange(data) {
			this.dataValue.text = data.value
			this.$emit('value-change', {
				item: this.item,
				index: this.index,
				value: this.dataValue
			})
		},
		addInput(value) {
			const link = this.item.setting.find((set) => set.value === value)?.link
			const input = link && link[0]
			this.inputConfig = input
			return input
		}
	}
}
</script>
<style lang="scss" scoped></style>
